<template>
  <div class="settings-page">
    <div class="header">
      <div class="arrow-with-text" @click="goBack">
        <van-icon name="arrow-left" class="back-icon" />
        <i class="el-icon-back" style="font-size: 24px"></i>
      </div>
    </div>
    <h1>设置</h1>
    <div class="settings-list">
      <div class="setting-item" @click="toggleNotifications">
        <span>通知</span>
        <i class="el-icon-bell"></i>
      </div>

      <div class="setting-item">
        <span>国家</span>
        <span>{{ currencyy.country }}</span>
      </div>
      <div class="setting-item" @click="currency">
        <span>货币</span>
        <span>{{currencyy.currencyName}}   {{currencyy.symbol}}</span>
      </div>
      <div class="setting-item clickable" @click="navigateToTerms">
        <span>服务条款</span>
        <span>></span>
      </div>
      <div class="setting-item clickable" @click="navigateToPrivacy">
        <span>隐私政策</span>
        <span>></span>
      </div>
      <div class="setting-item clickable" @click="navigateToFeedback">
        <span>反馈</span>
        <span>></span>
      </div>
      <div class="setting-item clickable" @click="navigateTo">
        <span>账号</span>
        <span>></span>
      </div>
    </div>
    <!--    底部导航-->
    <div class="bottom-navigation">
      <button @click="discover"><i class="el-icon-search"></i><br />发现</button>
      <button @click="travel"><i class="el-icon-star-off"></i><br />旅行</button>
      <button @click="myProfile"><i class="el-icon-user"></i><br />我的</button>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    const abc= sessionStorage.getItem("currency")
    if(abc!=null){
      this.currencyy=JSON.parse(abc)
    }
    console.log(this.currencyy)
  },
  data() {
    return {
      currencyy:{
        country: "中国",
        currencyName: "人民币",
        symbol: "¥"
      }
    };
  },
  methods: {
    toggleNotifications() {
      // 切换通知状态
      this.$router.push('/MaintenanceNotice');
      this.$router.go(0);
    },
    navigateToTerms() {
      // 跳转到服务条款页面
      this.$router.push('/terms');
    },
    navigateToPrivacy() {
      // 跳转到隐私政策页面
      this.$router.push('/privacy');
    },
    navigateToFeedback() {
      // 跳转到反馈页面
      this.$router.push('/feedback');
    },
    navigateTo() {
      // 跳转到反馈页面
      this.$router.push('/hao');
      this.$router.go(0);
    },
    goBack() {
      this.$router.push('/wo');
      this.$router.go(0);
    },
    discover() {
      if (this.$route.path !== '/homePage') {
        this.$router.push(`/homePage`);
        this.$router.go(0);
      }
    },
    travel() {
      this.$router.push('/travel');
      this.$router.go(0);
    },
    myProfile() {
      this.$router.push('/Wo');
    },
    currency(){
      this.$router.push('/huobi');
      this.$router.go(0);
    }
  }
};
</script>

<style scoped>
.settings-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
}

.settings-list {
  margin-top: 20px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.setting-item.clickable {
  cursor: pointer;
}

.setting-item.clickable:hover {
  background-color: #f5f5f5;
}
.operation-button {
  color: #1890ff;
  font-size: 14px;
  cursor: pointer;
}

.operation-button:hover {
  color: #096dd9;
}
.back-icon {
  color: #333;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.back-icon van-icon {
  margin-right: 5px;
}
.bottom-navigation {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  padding: 10px 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000; /* 确保它在其他内容之上 */
}

.bottom-navigation button {
  flex: 1;
  margin: 0 10px;
}
/* 头部样式 */
.header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 15px;
  background-color: #fff;
}
</style>
